<template>
  <div class="notification-list-container">
    <!-- 标题 -->
    <div class="notification-header">
      <h2 class="notification-title">通知中心</h2>
      <NotificationBadge /> <!-- 未读通知徽章 -->
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <Loading :show="true" text="加载通知中..." />
    </div>
    
    <!-- 空状态 -->
    <div v-else-if="notifications.length === 0" class="empty-state">
      <EmptyState 
        title="暂无通知" 
        desc="你还没有新的互动通知哦～" 
      />
    </div>
    
    <!-- 通知列表 -->
    <div v-else class="notification-list">
      <NotificationItem
        v-for="notification in notifications"
        :key="notification.id"
        :notification="notification"
        @click="handleNotificationClick(notification)"
      />
    </div>
    
    <!-- 加载更多 -->
    <div v-if="hasMore && !loading" class="load-more">
      <button @click="loadMoreNotifications">加载更多</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useNotificationStore } from '@/store/modules/notification';
import Loading from '../common/Loading.vue';
import EmptyState from '../common/EmptyState.vue';
import NotificationItem from './NotificationItem.vue';
import NotificationBadge from './NotificationBadge.vue';

// 状态管理
const notificationStore = useNotificationStore();
const loading = ref(false);
const hasMore = ref(true);
const page = ref(1);

// 计算属性：从 store 获取通知列表
const notifications = computed(() => notificationStore.notifications);

// 生命周期钩子
onMounted(() => {
  fetchNotifications();
});

// 获取通知列表
const fetchNotifications = async (reset = false) => {
  if (loading.value) return;
  
  loading.value = true;
  
  if (reset) {
    page.value = 1;
    hasMore.value = true;
  }
  
  try {
    // 实际项目中调用 API 获取数据
    // const response = await notificationStore.fetchNotifications({
    //   page: page.value
    // });
    
    // 模拟 API 响应（实际项目中替换为真实数据）
    const mockResponse = {
      notifications: [
        {
          id: 1,
          sender: { id: 101, username: 'UserA', avatar: 'https://via.placeholder.com/30' },
          content: '点赞了你的帖子《旅行vlog：云南之旅》',
          type: 'like',
          createdAt: new Date(Date.now() - 30 * 60 * 1000), // 30分钟前
          isRead: false
        },
        {
          id: 2,
          sender: { id: 102, username: 'UserB', avatar: 'https://via.placeholder.com/30' },
          content: '评论了你的照片：拍得真好！',
          type: 'comment',
          createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
          isRead: true
        },
        {
          id: 3,
          sender: { id: 103, username: 'UserC', avatar: 'https://via.placeholder.com/30' },
          content: '关注了你',
          type: 'follow',
          createdAt: new Date(Date.now() - 12 * 60 * 60 * 1000), // 12小时前
          isRead: false
        }
      ],
      hasMore: page.value < 3 // 模拟只有3页数据
    };
    
    // 实际项目中更新 store
    // notificationStore.setNotifications(mockResponse.notifications);
    hasMore.value = mockResponse.hasMore;
    page.value++;
  } catch (error) {
    console.error('Error fetching notifications:', error);
  } finally {
    loading.value = false;
  }
};

// 加载更多通知
const loadMoreNotifications = () => {
  fetchNotifications(false);
};

// 处理通知点击事件
const handleNotificationClick = (notification) => {
  // 根据通知类型处理跳转逻辑（实际项目中实现）
  console.log('点击通知:', notification);
  // 示例：
  // if (notification.type === 'like' || notification.type === 'comment') {
  //   router.push({ name: 'PostDetail', params: { id: notification.postId } });
  // } else if (notification.type === 'follow') {
  //   router.push({ name: 'Profile', params: { id: notification.sender.id } });
  // }
};
</script>

<style scoped>
.notification-list-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.notification-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.loading-state, .empty-state {
  text-align: center;
  padding: 40px 0;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.load-more {
  text-align: center;
  margin-top: 30px;
}

.load-more button {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.load-more button:hover {
  background-color: #e0e0e0;
}
</style>